<template>
    <div id="polling-detail">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="56%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >

            <el-divider content-position="left">{{ polData.des }}</el-divider>
            <el-table 
                class="heightcss" 
                style="width: 100%" 
                border
                :data="polData.polBody"
            >
                <el-table-column type="expand">
                    <template #default="scoped">
                        <span style="font-size: 12px;color: #F56C6C;margin: 5px 0px 5px 5px;display: block;">{{ $t('w9KxAyYCobkSVylEmF2nA') }} {{ scoped.row.n_SecurityCheckTimesNO }} {{ $t('w9KxAyYCobkSVylEmF2nB') }}</span>
                        <el-table
                            class="heightcss" 
                            style="width: 100%" 
                            border
                            :data="scoped.row.s_family"
                        >

                        <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('oQmKga3tHw8a3L3sgt9Xn')" align="center">
                            <template #default="scope">
                                <span>{{ scope.row.hazardDetail && scope.row.hazardDetail[0] && scope.row.hazardDetail[0].v_WorkExplain || '-' }}</span>
                            </template>
                        </el-table-column>
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" prop="v_NGTypeName" :label="$t('tmruUpoyR5Zja3zkb5oJg')" align="center" />
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" prop="v_CheckNGContent" :label="$t('yN3XgYqWhrFfTFd4jBtU6')"  align="center" />
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" prop="v_ExistsContent" :label="$t('hgt8rkigvu07O3lOsGgc2')" align="center" />
                        
                        <el-table-column min-width="160" :show-overflow-tooltip="true" :formatter="formatDate" prop="d_AskCompliteDate" :label="$t('05KrOcxT2AaBoabog6v9X')" align="center" />
                        
                        <el-table-column min-width="160" :show-overflow-tooltip="true" :formatter="formatDate" prop="d_CompliteDate" :label="$t('bkOkR68JMiDBswcYfFzRt')" align="center" />
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('dyWnpvJ8oFsUicF0Oau4f')" align="center">
                            <template #default="scope">
                                <span v-if="scope.row.n_CheckChangeState === 0" style="color: #F56C6C;">{{ $t('uKt4PrCmupaNhgk8hhAo') }}</span>
                                <span v-if="scope.row.n_CheckChangeState === 1" style="color: #67C23A;">{{ $t('gsQNjjKc3Gdm5d9qiwHXk') }}</span>
                                <span v-if="scope.row.n_CheckChangeState === 2" style="color: #E6A23C;">{{ $t('b5krNrA5QBz0shYNj25') }}</span>
                            </template>
                        </el-table-column>
                        
                        <!-- <el-table-column min-width="140" :show-overflow-tooltip="true" prop="c_CheckResult" :label="$t('wmfg6edJuImFjHpeTlbRu')" align="center" /> -->
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('yZg4b_5Ls7c7fZd9uNw1g')" align="center">
                            <template #default="scope">
                                <span v-if="scope.row.v_CheckChangeContent">{{ scope.row.v_CheckChangeContent }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" prop="v_CheckResultContent" :label="$t('ocC0miioNRiv0jSiehrb')" align="center" />
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('tPiWuSFanLeOKbJWvfz')" align="center">
                            <template #default="scoped">
                                <span v-if="scoped.row.v_ApplyEmpName">{{ scoped.row.v_ApplyEmpName }}</span>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" prop="v_AuditEmpName" :label="$t('sXyZ6PqmWwEIov0bNsb')" align="center" />
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" prop="v_ChangeEmpName" :label="$t('z_6MaI6MYIAjEp9UeAfF')" align="center" />
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')" align="center">
                            <template #default="scoped">
                                <span v-if="scoped.row.v_Remake">{{ scoped.row.v_Remake }}</span>
                                <span v-else> - </span>
                            </template>
                        </el-table-column>
                        
                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="createdTime" :label="$t('xxAj6fsjvIsQrMdlNpolv')" align="center" />
                        
                        <el-table-column min-width="140" :show-overflow-tooltip="true" prop="createdUserName" :label="$t('v7AhfaNeGaFoPfZzgpFk')" align="center" />

                        <el-table-column min-width="160" :formatter="formatDate" :show-overflow-tooltip="true" prop="updatedTime" :label="$t('hMMqYalIdWhk0McqdxTg')"  align="center" />

                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="updatedUserName" :label="$t('yRc0RHyyMh9Cy0TKyYr')"  align="center" />
                        </el-table>
                    </template>
                </el-table-column>

                <el-table-column 
                    v-for="polItem in polData.polHeader" 
                    align="center"
                    :key="polItem.inx"
                    :label="polItem.label"
                    :prop="polItem.prop"
                    :min-width="polItem.width"
                    :show-overflow-tooltip="true"
                />
            </el-table>

            <template #footer>
                <el-button @click="cancelUseClick">{{ $t('9YxdWp3OFxHvMW4VGh71') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: any,
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'polling-detail',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        polInfo: {
            type: Object,
            default: {}
        }
    },
    setup(props,ctx){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;
        const polData:any = ref()

        const titleCon = ref()
        const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            ruleForm: {} as ruleFormType,
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelPolClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelPolClick')
        }
        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                titleCon.value = $t('ucC9qxHvkvdh9OGEo1pn');
                polData.value = props.polInfo;
                console.log(props.polInfo,'polInfo')
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        /*** 截取日期格式方法 */
        const formatDate = (row:any, column:any) => {
          // 获取单元格数据
          console.log(row[column.property],'data')
          let data = row[column.property]
          if(data == $t('utiIUzqSzcKy0QiDc49n')){
            return '-'
          }else{
            return data
          }
        }

        return {
            handleClose,
            cancelUseClick,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            pathData,
            polData,
            formatDate,
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-link__inner){
        color: #0052D9;
    }
    // :deep(.el-divider__text){
    //     color: #303133;
    //     font-weight: bold;
    // }
    .path_look{
        display: block;
        width: 100%;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        span{
          display: block;
          margin-left: 15px;  
          color: #606266;
        }
    }
    .second-level-detail{
        width: 100%;
        margin: auto;
        padding: 10px;
        border: 1px solid #fcfafa;
        border-radius: 2px;
    }
    .data-detail{
        width: 100%;
        // border-bottom: 1px solid #dcdfe6;
        // border-radius: 2px;
        padding:0 10px;
    }
</style>